<table class="table">
  <tr>
    <td>#</td>
    <td>昵称</td>
    <td>姓名</td>
    <td>生日</td>
    <td>邮箱</td>
    <td>电话号码</td>
    <td>修改</td>
    <td>删除</td>
  </tr>
  <tr *ngFor="let user of users;let i=index">
    <td>{{i}}</td>
    <td>{{user.name}}</td>
    <td>{{user.username}}</td>
    <td>{{user.birthday|date:'yyyy-MM-dd'}}</td>
    <td>{{user.email}}</td>
    <td>{{user.telephone}}</td>
    <td>

      <span class="glyphicon glyphicon-pencil" (click)="edit(user.uid)" data-toggle="modal"
            data-target="#myModal"></span>

    <td><span class=" glyphicon glyphicon-remove" (click)="del(user.uid)"></span></td>
  </tr>

</table>
<div *ngIf="edi">
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
            aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel">修改用户</h4>
        </div>
        <div class="modal-body">
          <form #userForm="ngForm">

            <div class="form-group">
              <div class="input-group">
                <div class="input-group-addon">昵称</div>
                <input type="text" class="form-control" id="name" required [(ngModel)]="user['name']" name="name">
              </div>
            </div>
            <div class="form-group">
              <div class="input-group">
                <div class="input-group-addon">邮箱</div>
                <input type="email" class="form-control" id="email" required [(ngModel)]="user['email']" name="email">
              </div>
            </div>
            <div class="form-group">
              <div class="input-group">
                <div class="input-group-addon">生日</div>
                <input type="text" class="form-control" id="birthday" required [(ngModel)]="user['birthday']" name="birthday">

                <!--<mat-datepicker-toggle matSuffix [for]="picker3"></mat-datepicker-toggle>-->
                <!--<mat-datepicker #picker3></mat-datepicker>-->
              </div>
            </div>
            <div class="form-group">
              <div class="input-group">
                <div class="input-group-addon">电话</div>
                <input type="tel" class="form-control" id="telephone" required [(ngModel)]="user['telephone']"
                       name="telephone">
              </div>
            </div>
            <div class="modal-footer">
              <button (click)='submitEdit()' class="btn btn-success col-md-2 col-md-offset-4 "
                      [disabled]="!userForm.form.valid" data-dismiss="modal">
                Edit
              </button>
              <button type="reset" class="btn btn-success col-md-2 col-md-offset-8" [disabled]="!userForm.form.valid">
                Reset
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
